import { EditorState, type LexicalEditor } from 'lexical';
import React, { useCallback } from 'react';

import { editorStateToText } from '@/components/Textarea/PromptEditor/utils';
import {
  EditorVariableLabelPickerType,
  EditorVariablePickerType,
} from '@/types/workflow/components/common/Textarea/PromptEditor/type';

import Editor from './Editor';

const HttpInput = ({
  variables = [],
  variableLabels = [],
  value,
  onChange,
  onBlur,
  h,
  placeholder,
  updateTrigger,
}: {
  variables?: EditorVariablePickerType[];
  variableLabels?: EditorVariableLabelPickerType[];
  value?: string;
  onChange?: (text: string) => void;
  onBlur?: (text: string) => void;
  h?: number;
  placeholder?: string;
  updateTrigger?: boolean;
}) => {
  const [currentValue, setCurrentValue] = React.useState(value);

  const onChangeInput = useCallback(
    (editorState: EditorState, editor: LexicalEditor) => {
      const text = editorStateToText(editor).replaceAll('}}{{', '}} {{');
      setCurrentValue(text);
      onChange?.(text);
    },
    [onChange],
  );
  const onBlurInput = useCallback(
    (editor: LexicalEditor) => {
      const text = editorStateToText(editor).replaceAll('}}{{', '}} {{');
      onBlur?.(text);
    },
    [onBlur],
  );

  return (
    <div className="w-full p-2">
      <Editor
        variables={variables}
        variableLabels={variableLabels}
        h={h}
        value={value}
        currentValue={currentValue}
        onChange={onChangeInput}
        onBlur={onBlurInput}
        placeholder={placeholder}
        updateTrigger={updateTrigger}
      />
    </div>
  );
};
export default React.memo(HttpInput);
